{extend name="common@base" /}
{block name="content"}
<section class="content" id="container">
  <link rel="stylesheet" href="__CSS__/jstree/style.css">
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">设置{$row.title}的菜单权限</h3>
    </div>
    <div class="box-body">
      <div id="jstree_demo"></div>
    </div>
    <div class="box-footer">
      <div class="">
        <button id="btn_save" class="btn btn-primary">保存</button>
        <a href="javascript:history.back()" class="btn btn-default">返回</a>
      </div>

    </div>
  </div>
</section>
{/block}
{block name="page_script"}
<script>
  require(["layer_config", "jstree", "jstree.checkbox"], function (layer) {
    $(function () {
      $("#btn_save").on('click', function () {
        var obj = $("#jstree_demo"),
          ref = obj.jstree(true),
          nodes = ref.get_checked(),
          top_nodes = ref.get_top_checked(true)
        ;
        $.post("{:url('menu')}",
          {"nodes": nodes, "role_id": "{$role_id}", top_nodes: top_nodes},
          function (result) {
            if (result.code == 0) {
              js_alert(result);
            }else{
              js_message(result, true);
            }
          }, 'json');
      });

      $("#jstree_demo").on("loaded.jstree", function (e, data) {
        data.instance.open_all();
        $.get("{:url('menuAuth')}", {"role_id": "{$role_id}"},
          function (result) {
            console.log(result);
            data.instance.check_node(result.nodes);
          }, 'json');
      }).jstree({
        //$('#jstree_demo').jstree({
        "core": {
          "animation": 1,
          "check_callback": true,
          "themes": {"stripes": true,},
          "expand_selected_onload": true,
          'data': {
            'url': function (node) {
              return node.id === '#' ?
                '{:url("base/menu/treeMenu")}' : 'ajax_demo_children.json';
            },
            'data': function (node) {
              //console.log(node);
              return {'id': node.id};
            }
          }
        },
        "plugins": [
          "checkbox", "dnd", "state", "types", "wholerow"
        ],
        "checkbox": {
          "keep_selected_style": true
        },
      });

    });
  });
</script>
{/block}

